<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* div {
        width: 200px;
        height: 200px;
        background-color: red; */

      /* transition: all 1s; */

      /* transition-property表示参与过渡的属性 */
      /* 多个的时候用逗号或者all */
      /* transition-property: width, height; */

      /* transition-duration表示过渡的时间 */
      /* 单位是s或者ms */
      /* transition-duration: 500ms; */

      /* transition-delay表示过渡的延迟时间，默认是0 */
      /* transition-delay: 500ms; */
      /* } */
      /* div:hover {
        width: 500px;
        height: 500px;
      } */

      section {
        width: 600px;
        height: 700px;
        border: 1px solid #000;
      }
      div {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom: 20px;
        transition-property: width;
        transition-duration: 1s;
      }
      div:nth-child(2) {
        transition-timing-function: cubic-bezier(0.11, -0.67, 0.99, 0);
      }
      div:nth-child(3) {
        transition-timing-function: ease-in;
      }
      div:nth-child(4) {
        transition-timing-function: ease-out;
      }
      div:nth-child(5) {
        transition-timing-function: ease-in-out;
      }
      div:nth-child(6) {
        transition-timing-function: linear;
      }
      section:hover div {
        width: 600px;
      }
    </style>
  </head>
  <body>
    <section>
      <div>默认</div>
      <div>ease</div>
      <div>ease-in</div>
      <div>ease-out</div>
      <div>ease-in-out</div>
      <div>linear</div>
    </section>
  </body>
</html>

<!-- 
  含义 : 过度指的是元素从一种状态向另外一种状态进行缓慢的改变, 这种缓慢的效果被称之为过度 ;  过度属于动画的一种, 但是这种动画需要通过鼠标事件才能触发 , 没有鼠标事件是不能触发该属性的; 

  transition也是一个复合属性

  transition-property: 所有能参与过度的动画属性; 如果使用单一属性的话, 后面多个属性之间使用逗号隔开, 但是多个属性可以直接使用all代替; 需要注意的是 : display, visibility , 渐变不参与过度 ; 

  transition-duration : 过度动画需要花费的时间; 

  transition-delay: 过度动画的延迟执行 ; 

  transition-timing-function : 过度动画执行的类型;
    a) ease : 平滑过渡, 先快后慢，默认值
    b) ease-in : 由慢到快
    c) ease-out : 由快到慢
    d) ease-in-out : 由慢到快再到慢
    e) linear : 线性过渡 , 匀速直线运动
    f) steps() : 按照步骤执行
    g) 贝塞尔曲线 : cubic-bezier(, , , ) https://cubic-bezier.com/#.17,.67,.83,.67
    
 -->
